<template>
	<view class="recommend">
		<view class="tab_nav">
			<nav-bar nav_btn="back" title="推荐排行" :color="color" :auto_img="img" type="two"></nav-bar>
		</view>
		<view class="tabbar">
			<tab-bar :type="type"></tab-bar>
		</view>
		<view class="content w750">
			<view class="head_box w100 flex">
				<view class="ranking_one_box" @click="getDetail(list[1].goods_id)">
					<template v-if="list[1].num">
						<view class="head_back_image_box">
							<view class="ranking_two_box">
								<image class="w100 h100" src="../static/ranktwo.png" mode=""></image>
							</view>
							<view class="toux_two_img">
								<image class="w100 h100" style="border-radius: 50%;" :src="list[1].image_src" mode="">
								</image>
							</view>
						</view>
						<view class="goods_ranking_name s26 familytow fblod txtali">
							{{list[1].title || ''}}
						</view>
						<view class="goods_money_fenxiang_box w100 flexjus">
							<view class="goods_money_name s26 familytow fblod">
								￥{{list[1].price || 0}}
							</view>
							<view class="fx_image">
								<image class="w100 h100" src="../static/fx.png" mode=""></image>
							</view>
						</view>
						<view class="tuijian_chenj_txt f400 s20 familythree">
							推荐成交{{list[1].num || 0}}件
						</view>
					</template>
				</view>
				<view class="ranking_box" :style="{'margin': list.length == 1 ? '0 auto' : ''}"  @click="getDetail(list[0].goods_id)">
					<template v-if="list[0].num">
						<view class="ran_head_box">
							<view class="beij_rank">
								<image class="w100 h100" src="../static/rankone.png" mode=""></image>
							</view>
							<view class="toux_img">
								<image class="w100 h100" :src="list[0].image_src" mode=""></image>
							</view>
						</view>
						<view class="goods_ranking_name s26 familytow fblod txtali">
							{{list[0].title || ''}}
						</view>
						<view class="goods_money_fenxiang_box w100 flexjus">
							<view class="goods_money_name s26 familytow fblod">
								￥{{list[0].price || 0}}
							</view>
							<view class="fx_image">
								<image class="w100 h100" src="../static/fx.png" mode=""></image>
							</view>
						</view>
						<view class="tuijian_chenj_txt f400 s20 familythree">
							推荐成交{{list[0].num || 0}}件
						</view>
					</template>
				</view>
				<view class="ranking_one_box" @click="getDetail(list[2].goods_id)">
					<template v-if="list[2].num">
						<view class="head_back_image_box">
							<view class="ranking_two_box">
								<image class="w100 h100" src="../static/rankThree.png" mode=""></image>
							</view>
							<view class="toux_two_img">
								<image class="w100 h100" style="border-radius: 50%;" :src="list[2].image_src" mode="">
								</image>
							</view>
						</view>
						<view class="goods_ranking_name s26 familytow fblod txtali">
							{{list[2].title || ''}}
						</view>
						<view class="goods_money_fenxiang_box w100 flexjus">
							<view class="goods_money_name s26 familytow fblod">
								￥{{list[2].price || 0}}
							</view>
							<view class="fx_image">
								<image class="w100 h100" src="../static/fx.png" mode=""></image>
							</view>
						</view>
						<view class="tuijian_chenj_txt f400 s20 familythree">
							推荐成交{{list[2].num || 0}}件
						</view>
					</template>
				</view>
			</view>
			<view class="xian_box"></view>
			<view class="ranking_list_box">
				<view class="ranking_list flex" v-for="(item,index) in list" :key="index" v-if="index > 3">
					<view class="ranking_mc_txt s48 f500">
						{{index}}
					</view>
					<view class="ranking_mc_goods_img">
						<image class="w100 h100" :src="item.image_src" mode=""></image>
					</view>
					<view class="rankingmc_goods_name_money">
						<view class="flex">
							<view class="rkmc_goods_name s24 fblod familytow">
								{{item.title}}
							</view>
							<view class="tuijian_box txtali s20 familythree f400">
								推荐商品
							</view>
						</view>
						<view class="rkmc_goods_money s26 familytow fblod">
							￥{{item.price}}
						</view>
						<view class="flex">
							<view class="rkmc_goods_tuijian s20 familythree f400">
								推荐成交{{item.num}}件
							</view>
							<view class="xiadan_btn s24 fblod familytow txtali" @click="getDetail(item.goods_id)">
								下单
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tuijian_btn flex">
			<view class="tuijian_img_kk">
				<image class="w100 h100" src="../static/tuijian_kk.png" mode=""></image>
			</view>
			<view class="tuijian_txt_kk s28 family f500">
				推荐店铺
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'five',
				color: '#FFFFFF',
				img: '../pages/filePages/static/left_jian.png',
				list: [],
				page: 1,
			}
		},
		onLoad() {
			this.getRinkList()
		},
		onReachBottom() {
			this.page++
			this.getRinkList()
			this.$wanlshop.msg('我是有底线的')
		},
		methods: {
			getRinkList() {
				let that = this
				uni.showLoading({
					title: "加载中..."
				})
				that.$request({
					url: 'bisic/getList',
					data: {
						shop_id: that.$store.state.shop.id
					}
				}).then(res => {
					if(res.data.code == 1) {
						uni.hideLoading()
						if (that.page == 1) {
							that.list = res.data.data.data
						} else {
							if (res.data.data.data.length > 0) {
								that.list.concat(res.data.data.data);
							} else {
								that.page--
							}
						}
					}
				})
			},
			getDetail(id) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + id + '&type=0'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.recommend {
		position: relative;

		.tuijian_btn {
			width: 252upx;
			height: 70upx;
			background: rgba(244, 136, 8, 0.9);
			box-shadow: 0upx 0upx 22upx 4upx rgba(244, 136, 8, 0.28);
			border-radius: 18upx 18upx 18upx 18upx;
			position: fixed;
			bottom: 204upx;
			left: 248upx;

			.tuijian_img_kk {
				width: 30upx;
				height: 30upx;
				margin-top: 18upx;
				margin-left: 50upx;
			}

			.tuijian_txt_kk {
				line-height: 70upx;
				margin-left: 14upx;
				color: #FFFFFF;
			}
		}

		.tab_nav {
			width: 750upx;
			height: 220upx;
			background: #000000;
		}

		.tabbar {
			position: absolute;
		}

		.content {
			height: 1326upx;
			background: #FFFFFF;
			border-radius: 32upx 32upx 0 0;
			margin-top: -20upx;

			.head_box {
				height: 460upx;

				.ranking_box {
					width: 240upx;
					margin-left: 28upx;

					.ran_head_box {
						width: 240upx;
						height: 294upx;
						overflow: hidden;

						.beij_rank {
							width: 240upx;
							height: 294upx;
							overflow: hidden;
							position: relative;
							top: 0;
							z-index: 999;
						}

						.toux_img {
							width: 196rpx;
							height: 196rpx;
							border-radius: 50%;
							overflow: hidden;
							position: relative;
							margin: 0 auto;
							top: -218rpx;
						}
					}

					.goods_ranking_name {
						width: 204upx;
						height: 36upx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 8upx auto;
					}

					.goods_money_fenxiang_box {
						width: 204upx;
						margin: 12upx auto;

						.goods_money_name {
							color: #FF3F4A;
						}

						.fx_image {
							width: 26upx;
							height: 26upx;
							margin-top: -4upx;
						}
					}

					.tuijian_chenj_txt {
						margin-top: 10upx;
						color: #999999;
						margin-left: 20upx;
					}
				}

				.ranking_one_box {
					width: 196upx;
					margin-left: 32upx;
					margin-top: 58upx;

					.head_back_image_box {
						width: 196upx;
						height: 240upx;

						.ranking_two_box {
							width: 196upx;
							height: 240upx;
							position: relative;
							z-index: 99;
						}

						.toux_two_img {
							width: 159upx;
							height: 159upx;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 auto;
							position: relative;
							top: -178upx;
						}
					}

					.goods_ranking_name {
						width: 188upx;
						height: 36upx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 8upx auto;
					}

					.goods_money_fenxiang_box {
						width: 188upx;
						margin: 12upx auto;

						.goods_money_name {
							color: #FF3F4A;
						}

						.fx_image {
							width: 26upx;
							height: 26upx;
							margin-top: -4upx;
						}
					}

					.tuijian_chenj_txt {
						margin-top: 10upx;
						color: #999999;
						margin-left: 4upx;
					}
				}
			}

			.xian_box {
				width: 686upx;
				height: 2upx;
				background-color: #e4e4e4;
				margin: 0 auto;
			}

			.ranking_list_box {
				margin-top: 32upx;
				margin-bottom: 160upx;

				.ranking_list {
					height: 136upx;
					margin-left: 32upx;
					margin-bottom: 34upx;

					.ranking_mc_txt {
						font-family: DIN-Medium, DIN;
						color: #000000;
						line-height: 136upx;
					}

					.ranking_mc_goods_img {
						width: 136upx;
						height: 136upx;
						border-radius: 8upx;
						margin-left: 32upx;
						overflow: hidden;
					}

					.rankingmc_goods_name_money {
						margin-left: 32upx;

						.rkmc_goods_name {
							width: 184upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #000000;
						}

						.tuijian_box {
							width: 112upx;
							height: 40upx;
							background: rgba(246, 148, 33, 0.66);
							border-radius: 20upx 0upx 0upx 20upx;
							line-height: 40upx;
							color: #FFFFFF;
							margin-left: 200upx;
						}

						.rkmc_goods_money {
							color: #FF3F4A;
							margin-top: 12upx;
						}

						.rkmc_goods_tuijian {
							margin-top: 28upx;
							color: #999999;
						}

						.xiadan_btn {
							width: 114upx;
							height: 58upx;
							background: #FF3F4A;
							border-radius: 50upx 50upx 50upx 50upx;
							line-height: 58upx;
							color: #FFFFFF;
							position: absolute;
							right: 32upx;
						}
					}
				}

			}
		}
	}
</style>
